<template>
<!-- 公共页面头部的实现  -->
  <el-header class="me-area">
    <el-row class="me-header">

      <el-col :span="4" class="me-header-left">
        <router-link to="/" class="me-title">
          <img src="../assets/img/logo.png" />
        </router-link>
      </el-col>

      <el-col v-if="!simple" :span="16">
        <el-menu :router=true menu-trigger="click" active-text-color="#5FB878" :default-active="activeIndex"
                 mode="horizontal">
                
          <el-menu-item class="title" index="/">首页</el-menu-item>
          <el-menu-item class="title" index="/category/all">文章分类</el-menu-item>
          <el-menu-item class="title" index="/archives">文章归档</el-menu-item>

          <!--v-if判断用户是否登录，如果用户登录则显示我的收藏和消息 -->
          <el-menu-item class="title" index="/favorite" v-if="user.login">我的收藏</el-menu-item>
          <el-menu-item class="title" index="/news" v-if="user.login">消息</el-menu-item>


          <el-col :span="4" :offset="4">
            <el-menu-item index="/write" v-if="user.login"><i class="el-icon-edit"></i>写文章</el-menu-item>
          </el-col>

        </el-menu>
      </el-col>

      <template v-else>
        <slot></slot>
      </template>

      <el-col :span="4">
        <el-menu :router=true menu-trigger="click" mode="horizontal" active-text-color="#5FB878">
          
          <!-- v-if 判断用户是否登录 如果没有则显示登录和注册-->
          <template v-if="!user.login">
            <el-menu-item index="/login">
              <el-button type="text">登录</el-button>
            </el-menu-item>
            <el-menu-item index="/register">
              <el-button type="text">注册</el-button>
            </el-menu-item>
          </template>

          <!-- v-else 如果v-if判断不成立则会显示个人头像，点击出现下拉框 -->
          <template v-else>
            <el-submenu>
              <template slot="title">
              <!-- user.avatar从this.$store.state.avatar获取用户头像的地址 -->
                <img class="me-header-picture" :src="user.avatar"/>
              </template>
              <el-menu-item  @click="myCenter" style="text-align:center">个人中心</el-menu-item>
              <el-menu-item  @click="changePassword" style="text-align:center">修改密码</el-menu-item>
              <el-menu-item  @click="logout" style="text-align:center">退出</el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>

    </el-row>
  </el-header>
</template>

<script>
  export default {
    name: 'BaseHeader',
    props: {
      activeIndex: String,
      simple: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    computed: {
      user() {
        // 判断this.$store.state.account.length是否为0，如果为0则未登录，如果不为0则已经登陆
        let login = this.$store.state.account.length !== 0
        // 获取该用户的头像，并将其地址赋值给avatar
        let avatar = this.$store.state.avatar
        return {
          login, avatar
        }
      }
    },
    methods: {
      logout() {
        // 为防止this的变化而导致所需的方法或值无法找到，创建一个that，并将this的值赋给that，
        // 当需要访问this的方法或值时，可以直接使用that
        let that = this
        //this.$store.dispatch('logout')来调取logout里方法
        this.$store.dispatch('logout').then(() => {
          // 将页面重定向到首页
          that.$router.push({path: '/'})
        }).catch((error) => {       //抓取错误信息并返回
          if (error !== 'error') {   
            // 将error作为message属性的值 用以提示用户错误信息
            that.$message({message: error, type: 'error', showClose: true});
          }
        })
      },
      // 将页面重定向至Url1
      linkTo(url){
        this.$router.push({path: url})
      },
      // 将页面重定向至修改密码页面
      changePassword() {
        this.$router.push({path: '/changePwd'})
      },
      // 将页面重定向至个人中心
      myCenter() {
        this.$router.push({path: '/center'})
      },
    }
  }
</script>

<style>

  .el-header {
    position: fixed;
    z-index: 1024;
    min-width: 100%;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
  }

  .me-title {
    margin-top: 10px;
    font-size: 24px;
  }

  .me-header-left {
    margin-top: 10px;
  }

  .me-title img {
    max-height: 2.4rem;
    max-width: 100%;
  }

  .me-header-picture {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #5fb878;
  }

  .title {
    font-weight: 600;
  }
</style>
